<template>
  <div class="app-container home">
<!--    <el-button type="primary" @click="sellWordOrders('bfdw')">布放点位</el-button>-->
<!--    <el-button type="primary" @click="sellWordOrders('warnModal')">告警信息</el-button>-->
    <el-row :gutter="20" style="height:100%;">
      <!-- 部门树 -->
      <el-col :lg="3" :xs="24" >
        <el-card shadow="hover" style="height:100%;background:#fff;" >
          <span class="bt"><span class="block"></span>区域位置</span>
          <el-input v-model="state.deptName" placeholder="请输入" prefix-icon="Search" clearable @change="getTreeSelect" />
          <el-tree
            ref="deptTreeRef"
            class="mt-2"
            node-key="id"
            :data="deptOptions"
            :props="{ label: 'label', children: 'children' }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
          />
        </el-card>
      </el-col>
      <el-col :lg="15" :xs="24" style="position:relative">
        <div id="map" />
        <div class="map_content">
          <div style="width:100%;border-bottom: 1px solid #DCDFE6;height:40px;line-height:40px;">
            <svg class="icon svg-icon" aria-hidden="true" >
                  <use xlink:href="#icon-weizhi"></use>
                </svg>
            <span style="margin-left:5px;">位置:{{ state.address }}</span>
          </div>
          <div class="div_50 color14" style="height:50px;">
              <span class="yellow-bg">
                <svg class="icon svg-icon" aria-hidden="true" style="color:#fff;font-size:20px;margin-top:5px;">
                  <use xlink:href="#icon-shexiangtou"></use>
                </svg>
              </span>
              <span>监控:{{ state.monitorNum }}个</span>
          </div>
          <div class="div_50 color14" style="height:50px;">
            <span class="red-bg" style="  width:32px;height: 32px;border-radius:50%;">
            <svg class="icon svg-icon" aria-hidden="true" style="color:#fff;font-size:20px;margin-top:5px;" >
              <use xlink:href="#icon-jinggao_o"></use>
            </svg>
            </span>
            <span>消防点:{{ state.fireFightingNum }}个</span>
          </div>
        </div>
      </el-col>
      <el-col :lg="6" :xs="24" >
        <el-card shadow="hover" style="height:100%;background:#fff;" >
          <span class="bt"><span class="block"></span>区域位置</span>
          <div class="right_klsb">
            <div class="div_50" style="border-bottom: 1px solid #DCDFE6;">
              <span class="blue-bg">
              <svg class="icon svg-icon" aria-hidden="true" style="color:#fff">
                <use xlink:href="#icon-shexiangtou"></use>
              </svg>
              </span>
              <span>监控设备：</span>
              <span class="num-style">{{ rightObj.monitorNum }}个</span>
            </div>
            <div class="div_50" style="justify-content: space-around;">
              <span class="state-style">监控状态</span>
              <span>
              <span class="green-bg">
                <svg class="icon svg-icon" aria-hidden="true" style="color:#fff">
                  <use xlink:href="#icon-shexiangtou"></use>
                </svg>
              </span>
              <span class="type-style">在线</span>
              <span class="num-style">{{ rightObj.monitorOnLineNum }}</span>
              <span>个</span>
              </span>
              <span>
                <span class="red-bg">
                  <svg class="icon svg-icon" aria-hidden="true" style="color:#fff">
                    <use xlink:href="#icon-shexiangtou"></use>
                  </svg>
                </span>
                <span class="type-style">离线</span>
                <span class="num-style">{{ rightObj.monitorOfflineNum }}</span>
                <span class="type-style">个</span>
              </span>
            </div>
          </div>
          <div class="right_xfsb">
            <div class="div_50" style="border-bottom: 1px solid #DCDFE6;">
              <span class="blue-bg">
              <svg class="icon svg-icon" aria-hidden="true" style="color:#fff">
                <use xlink:href="#icon-shexiangtou"></use>
              </svg>
              </span>
              <span>消防设备：</span>
              <span class="num-style">{{ rightObj.fireFightingNum }}个</span>
            </div>
            <div class="div_50" style="justify-content: space-around;">
              <span class="state-style">设备状态</span>
              <span>
              <span class="green-bg">
                <svg class="icon svg-icon" aria-hidden="true" style="color:#fff">
                  <use xlink:href="#icon-shexiangtou"></use>
                </svg>
              </span>
              <span class="type-style">离线</span>
              <span class="num-style">{{ rightObj.fireFightingOfflineNum }}</span>
              <span>个</span>
              </span>
              <span>
                <span class="red-bg">
                  <svg class="icon svg-icon" aria-hidden="true" style="color:#fff">
                    <use xlink:href="#icon-shexiangtou"></use>
                  </svg>
                </span>
                <span class="type-style">在线</span>
                <span class="num-style">{{ rightObj.fireFightingOnLineNum }}</span>
                <span class="type-style">个</span>
              </span>
            </div>
          </div>
          <div class="right_gjqs">
            <div class="title">
              <span class="circleIcon"></span>
              近7日告警趋势
            </div>
              <div ref="getGjList" style="height: 200px" />
          </div>
          <div class="right_dqjg">
            <div class="title">
              <span class="circleIcon"></span>
              当前警告
            </div>
            <div class="dqjg_list">
            <div v-for="item in alarmRecordVoList" class="dqjg_list-item">
              <span>告警时间：{{ item.alarmTime }}</span>
              <span>告警等级：<span v-for="item1 in alarm_grade" ><span v-show="item1.value==item.alarmGrade"> {{ item1.label }}</span></span></span>
              <span>告警类型： <span v-for="item2 in alarm_type" v-show="item2.value==item.alarmType">{{ item2.label }}</span></span>
              <span>告警位置：{{ item.alarmAddress }}</span>
              <div class="btn-list">
                <span class="ckxq_btn" @click="sellWordOrders('gjxq',item)">
                  <svg class="icon svg-icon" aria-hidden="true" >
                    <use xlink:href="#icon-yanjing"></use>
                  </svg>
                  查看详情
                </span>
                <span class="ckxq_btn" @click="sellWordOrders('pfgd',item)">
                  <svg class="icon svg-icon" aria-hidden="true">
                    <use xlink:href="#icon-daohang_o"></use>
                  </svg>
                  派发工单
                </span>
                <span class="jcjg_btn" @click="sellWordOrders('jcjg',item)">
                  <svg class="icon svg-icon" aria-hidden="true" style="color:#FF7D00">
                    <use xlink:href="#icon-ClearHyperlinks"></use>
                  </svg>
                  解除警告
                </span>
              </div>
            </div>
            </div>
          </div>

        </el-card>
      </el-col>
    </el-row>
    <!--弹框界面-->
    <el-drawer ref="formDialogRef" v-model="dialog.shouAdd" :title="dialog.title" :size="dialog.width" append-to-body @close="closeDialog">
      <el-form v-if="dialog.title=='派发工单'" ref="workOrderRef" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="工单类型" prop="nickName">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="指定受理人" prop="nickName">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="工单等级">
              <el-select v-model="form.sex" placeholder="请选择">
                <el-option v-for="dict in sys_user_sex" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="位置描述">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="完成时间">
              <el-date-picker
              v-model="form.monthCardStartTime"
              style="width:100%"
              clearable
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="请选择时间" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="工单详情">
              <el-input
                v-model="form.textarea"
                type="textarea"
                :rows="2"
                placeholder="请输入内容">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="dialog.title=='解除警告'" ref="releaseWarnRef" :model="releaseWarnForm" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="解除原因" prop="nickName">
              <el-select v-model="releaseWarnForm.relieveReason" placeholder="请选择">
                <el-option v-for="dict in relieve_reason" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
              <!-- <el-input v-model="form.relieveReason" type="textarea" placeholder="请输入内容"></el-input> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注说明">
              <el-input
                v-model="releaseWarnForm.remark"
                type="textarea"
                :rows="2"
                placeholder="请输入内容">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form v-if="dialog.title=='告警详情'" ref="warnDetailRef" :rules="rules" label-width="120px">
        <el-row style="margin-bottom:10px;">
          <el-col :span="24">
            <el-steps v-if="alarmRecordDetailList.statusdetailList" :active="alarmRecordDetailList.statusdetailList.length">
              <el-step v-for="(item,index) in alarmRecordDetailList.statusdetailList">
                <template #title>
                  <span v-if="index==0">上报告警</span>
                  <span v-if="index==1">告警处置</span>
                  <span v-if="index==2">处置完成</span>
                </template>
                <template #description>
                <div>{{ item }}</div>
                </template>
              </el-step>
            </el-steps>
          </el-col>
        </el-row>
        <div style="width:50%;float: left;">
        <el-row >
          <el-col :span="24">
            <el-form-item label="吿警编号：" prop="alarmCode">
              {{ alarmRecordDetailList.alarmCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="上报时间：" prop="alarmCode">
              {{ alarmRecordDetailList.alarmTime }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="告警类型：" prop="alarmCode">
              <span v-for="item2 in alarm_type" v-show="item2.value==alarmRecordDetailList.alarmType">{{ item2.label }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="告警事件：" prop="alarmCode">
              {{ alarmRecordDetailList.alarmDesc }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="告警位置：" prop="alarmCode">
              {{ alarmRecordDetailList.alarmAddress }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="告警设备：" prop="alarmCode">
              {{ alarmRecordDetailList.equipmentName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="告警状态：" prop="alarmCode">
              <span v-for="item2 in alarm_handle_status" v-show="item2.value==alarmRecordDetailList.alarmHandleStatus">{{ item2.label }}</span>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="管控设施：" prop="alarmCode">
              <span v-if="alarmRecordDetailList.alarmHandleStatus==1">{{ alarmRecordDetailList.relieveReason }}</span>
              <span v-if="alarmRecordDetailList.alarmHandleStatus==2">派发工单</span>
              <span v-if="alarmRecordDetailList.alarmHandleStatus==3">已处理</span>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
        <div class="gjtp">
          告警图片
            <el-image
            v-for="item in alarmRecordDetailList.imgUrlList"
                style="width: 500px; height: 300px"
                 :src="item.url"
:preview-src-list="[`${item.url}`]"
                ></el-image>

        </div>
        <div style="width:100%;float: left;">
          <span class="blue-line"></span>
          <span>关联工单</span>
        </div>
        <el-table v-loading="loading" :data="userList" border >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column key="userId" label="工单编号" align="center" prop="userId" />
            <el-table-column key="userName" label="工单类型" align="center" prop="userName" :show-overflow-tooltip="true" />
            <el-table-column key="nickName" label="工单等级" align="center" prop="nickName" :show-overflow-tooltip="true" />
            <el-table-column key="deptName" label="工单状态" align="center" prop="deptName" :show-overflow-tooltip="true" />
            <el-table-column key="phonenumber" label="受理人" align="center" prop="phonenumber" width="120" />
            <el-table-column key="status" label="派发时间" align="center">
              <template #default="scope">
                <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
              </template>
            </el-table-column>

            <el-table-column label="完成时间" align="center" prop="createTime" width="160">
              <template #default="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="getList"
          />
      </el-form>
      <el-form v-if="dialog.title=='布防点位'" ref="deployaDefensePointRef" :model="pointDetail" :rules="rules" label-width="120px">
        <div style="width:50%;float: left;">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="布防位置：" prop="alarmCode">
              {{ pointDetail.parkBuildingAreaName }} {{ pointDetail.parkBuildingName }} {{ pointDetail.parkBuildingFloorName }}
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="布防设备：" prop="alarmCode">
              {{ pointDetail.deviceName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备类型：" prop="alarmCode">
              <span v-for="item1 in equipment_type" >
                  <span v-show="item1.value==pointDetail.equipmentType"> {{ item1.label }}</span>
                </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备编码：" prop="alarmCode">
              {{ pointDetail.equipmentCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="设备标识码：" prop="alarmCode">
              {{ pointDetail.deviceId }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="运行状态：" prop="alarmCode">
              <span v-for="item1 in device_status" >
                  <span v-show="item1.value==pointDetail.deviceStatus"> {{ item1.label }}</span>
                </span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="关联设备：" prop="alarmCode">
              {{ pointDetail.defenseEquipmentName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="AI算法：" prop="alarmCode">
              {{ pointDetail.cameraAiNameList }}
            </el-form-item>
          </el-col>
        </el-row>
        </div>
        <div class="gjtp">
          <el-form-item label="" prop="alarmCode">
            告警图片
          <el-image
              style="width: 500px; height: 300px"
                :src="pointDetail.imgUrlList"
:preview-src-list="[`${pointDetail.imgUrlList}`]"
              ></el-image>
          </el-form-item>
        </div>
        <div style="width:100%;float: left;">
          <span class="blue-line"></span>
          <span>告警记录</span>
        </div>
        <el-table v-loading="loading" :data="alarmRecordDetailsVoList" border >
            <el-table-column key="alarmCode" label="告警编号" align="center" prop="alarmCode" />
            <el-table-column key="alarmType" label="告警类型" align="center" prop="alarmType" :show-overflow-tooltip="true" >
              <template #default="scope">
              <span v-for="item2 in alarm_type" v-show="item2.value==scope.row.alarmType">{{ item2.label }}</span>
            </template>
            </el-table-column>
            <el-table-column key="alarmGrade" label="告警等级" align="center" prop="alarmGrade" :show-overflow-tooltip="true" >
              <template #default="scope">
                <span v-for="item1 in alarm_grade" >
                  <span v-show="item1.value==scope.row.alarmGrade"> {{ item1.label }}</span>
                </span>
              </template>
            </el-table-column>
            <el-table-column key="alarmAddress" label="告警位置" align="center" prop="alarmAddress" :show-overflow-tooltip="true" />
            <el-table-column key="alarmHandleStatus" label="告警状态" align="center" prop="alarmHandleStatus" width="120" >
              <span v-for="item2 in alarm_handle_status" v-show="item2.value== scope.row.alarmHandleStatus">{{ item2.label }}</span>
            </el-table-column>

            <el-table-column key="alarmTime" label="上报时间" align="center" prop="alarmTime" />
            <el-table-column label="完成时间" align="center" prop="alarmHandleTime" >
              <template #default="scope">
                <span>{{ scope.row.alarmHandleTime }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- <pagination
            v-show="total > 0"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            :total="total"
            @pagination="getList"
          /> -->
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button v-if="dialog.title=='告警详情'" type="primary" @click="submitForm">派 发 工 单</el-button>
          <el-button v-if="dialog.title=='告警详情'" @click="submitForm">解 除 告 警</el-button>
          <el-button v-if="dialog.title!=='告警详情'" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel()">取 消</el-button>
        </div>
      </template>
    </el-drawer>
    <!--推送的信息弹框-->
    <el-dialog
      v-model="dialogVisible"
      title="警告提示"
      class="jgti_modal"
append-to-body
      width="500px"
      :before-close="handleClose">
      <el-form ref="warnRef" :model="form" :rules="rules" label-width="80px" >
        <div >
          <el-row>
            <el-col :span="24">
              <el-form-item style="margin-left:-80px;">
              非法闯入 告警事件
              <span class="ckxq_btn" style="margin-left:10px;" @click="sellWordOrders('gjxq')"> 查看详情</span>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="告警时间" >
              1111
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="告警类型">
              1111
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="告警等级">
              1111
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="告警位置">
              1111
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="sellWordOrders('jcjg')">解 除 告 警</el-button>
          <el-button type="primary" @click="sellWordOrders('pfgd')">派 发 工 单</el-button>
        </div>
      </template>

    </el-dialog>

    <!-- <div id="my-map"></div> -->
  </div>
</template>

<script setup name="Index" lang="ts">

import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
// extent
// import extent from 'ol/extent'
import { transformExtent, fromLonLat, toLonLat } from 'ol/proj'
import TileLayer from 'ol/layer/Tile';
import { TileSuperMapRest } from '@supermapgis/iclient-ol';
import mapsJson from './maps.json'
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import { Circle, Point, LineString, Polygon } from 'ol/geom'
import { Style, Stroke, Fill, Icon, Text, Circle as StyleCircle } from 'ol/style';
import Cluster from 'ol/source/Cluster'
import logo from '@/assets/images/profile.jpg'
import logo1 from '@/assets/logo/logo.png'
import OSM from 'ol/source/OSM'
import { Select } from 'ol/interaction'
import { click, platformModifierKeyOnly } from 'ol/events/condition';
import { DeptVO } from '@/api/system/dept/types';
import api from '@/api/system/user';
import * as echarts from 'echarts';
import { getCache } from '@/api/access/parking-lot/parking-overview';
import { UserForm, UserQuery, UserVO } from '@/api/system/user/types';
import { alarmRecordDetailsVO } from '@/api/park/park-place/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { parkTreeList, securityPlatParkPlaceIdDetail, securityPlatDetail, securityPlatById, pointDetailById } from '@/api/park/park-place';
const { relieve_reason, alarm_grade, alarm_type, device_status, equipment_type, alarm_handle_status } = toRefs<any>(proxy?.useDict('relieve_reason', 'alarm_grade', 'alarm_type', 'device_status', 'equipment_type', 'alarm_handle_status'));
import {
  alarmRecordDetail,
  updatealarmrecord
} from '@/api/workbench/alarm/alarm-record';
const goTarget = (url: string) => {
  window.open(url, '__blank');
};
const deptOptions = ref<DeptVO[]>([]);
const getGjList = ref();
// 定义变量内容
const state = reactive({
  id: null,
  deptName: '',
  fireFightingNum: 0,
  monitorNum: 0,
  address: '',
  map: null,
  map1: null,
  mapView: {
    center: fromLonLat([108.939062, 34.374741]), // 地图中心点
    zoom: 11, // 初始缩放级别
    minZoom: 10, // 最小缩放级别
    maxZoom: 17 // 最大缩放级别
  },
  // 瓦片引入地址 nginx
  outMapUrl: 'http://110.41.47.245:8090/iserver/services/map-YJWLY/rest/maps/Black_outdoor_map_cn',
  interMapUrl: `http://110.41.47.245:8090/iserver/services/map-YJWLY/rest/maps/Black_floor_map_F01_SF1_01_cn`,
  // 瓦片本地引入 瓦片等级越高加载编译越慢
  // 在 public 下新建 tiles 文件夹，将下好的瓦片放进去
  // mapUrl: `tiles/{z}/{x}/{y}.png`
  feature: null,
  addPointsSource: null,
  imgurl: logo1,
  deptId: null,
  url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
});
const workOrderRef = ref<ElFormInstance>();
const releaseWarnRef = ref<ElFormInstance>();
const warnDetailRef = ref<ElFormInstance>();
const deployaDefensePointRef = ref<ElFormInstance>();
const warnRef = ref<ElFormInstance>();
const dialog = reactive<DialogOption>({
  visible: false,
  title: '',
  width: '600px'
});
const initFormData: UserForm = {
  userId: undefined,
  deptId: undefined,
  userName: '',
  nickName: undefined,
  password: '',
  phonenumber: undefined,
  email: undefined,
  sex: undefined,
  status: '0',
  remark: '',
  postIds: [],
  roleIds: []
};
const initData: PageData<UserForm, UserQuery> = {
  form: { ...initFormData },

  queryParams: {
    pageNum: 1,
    pageSize: 10,
    userName: '',
    phonenumber: '',
    status: '',
    deptId: '',
    roleId: ''
  },

  rules: {
    userName: [
      { required: true, message: '用户名称不能为空', trigger: 'blur' },
      {
        min: 2,
        max: 20,
        message: '用户名称长度必须介于 2 和 20 之间',
        trigger: 'blur'
      }
    ],
    nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
    password: [
      { required: true, message: '用户密码不能为空', trigger: 'blur' },
      {
        min: 5,
        max: 20,
        message: '用户密码长度必须介于 5 和 20 之间',
        trigger: 'blur'
      },
      { pattern: /^[^<>"'|\\]+$/, message: '不能包含非法字符：< > " \' \\\ |', trigger: 'blur' }
    ],
    email: [
      {
        type: 'email',
        message: '请输入正确的邮箱地址',
        trigger: ['blur', 'change']
      }
    ],
    phonenumber: [
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: '请输入正确的手机号码',
        trigger: 'blur'
      }
    ],
    roleIds: [{ required: true, message: '用户角色不能为空', trigger: 'blur' }]
  }
};
const data = reactive<PageData<UserForm, UserQuery>>(initData);
const { queryParams, form, rules } = toRefs<PageData<UserForm, UserQuery>>(data);
const userList = ref<UserVO[]>();
const loading = ref(true);
const dateRange = ref<[DateModelType, DateModelType]>(['', '']);
const total = ref(0);
const dialogVisible = ref(false)
const alarmRecordVoList = ref([])
const alarmRecordDetailsVoList = ref<alarmRecordDetailsVO[]>([]);
const releaseWarnForm = {
  relieveReason: '',
  remark: '',
  alarmRecordId: undefined,
  alarmHandleStatus: 3
}
/** 储存右侧数据**/
let rightObj = reactive({
  fireFightingNum: 0,
  fireFightingOfflineNum: 0,
  fireFightingOnLineNum: 0,
  monitorNum: 0,
  monitorOfflineNum: 0,
  monitorOnLineNum: 0,
  alarmRecordVoList: [],
  dlarmTrendVoList: []
})

let alarmDetails

let pointDetail = reactive({})

let alarmRecordDetailList = reactive({})
/** 查询部门下拉树结构 */
const getTreeSelect = async () => {
  let param = {
    placeName: state.deptName
  }
  const res = await parkTreeList(param);
  deptOptions.value = res.data;
  handleNodeClick(res.data[0])
};
/** 通过条件过滤节点  */
const filterNode = (value: string, data: any) => {
  if (!value) { return true; }
  return data.label.indexOf(value) !== -1;
};
/** 节点单击事件 */
const handleNodeClick = async (data: DeptVO) => {
  state.deptId = data.id;
  state.address = data.label;
  const res = await securityPlatParkPlaceIdDetail(data.id);
  state.monitorNum = res.data.monitorNum
  state.fireFightingNum = res.data.fireFightingNum
};
/** 搜索按钮操作 */
const handleQuery = () => {
  getTreeSelect();
};
/** 重置按钮操作 */
const resetQuery = () => {
  state.deptId = undefined;
  handleQuery();
};
/** 近7日告警趋势* */
const getGjqsList = async () => {
  const commandstatsIntance = echarts.init(getGjList.value, 'macarons');
  let data = rightObj.dlarmTrendVoList
  let xData = []
  let valueData = []
  data.forEach(element => {
    valueData.push(element.num)
    xData.push(element.dayTime)
  });
  let option = {
    grid: {
      left: '5%',
      right: '5%',
      bottom: '2%',
      top: '10%',
      containLabel: true
    },
    backgroundColor: '#fff',
    textStyle: {
      fontSize: 0
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'none'
      },
      formatter: function(params) {
        return String(params[0].name) +
                      "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
                       ' : ' + params[0].value + ' <br/>'
      }
    },
    xAxis: {
      // nameTextStyle: {
      //     color: '#E5E7ED',
      //     padding: [0, 0, -10, 0],
      //     fontSize: 14,
      // },
      axisLabel: {
        color: '#999999',
        fontWeight: 400,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontSize: 13,
        interval: 0,
        rotate: 20
      },
      axisTick: {
        lineStyle: {
          color: '#0B1535',
          width: 1
        },
        show: false
      },
      splitLine: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: '#E5E7ED',
          width: 1,
          type: 'solid'
        },
        show: true
      },
      data: xData,
      type: 'category'
    },
    yAxis: {
      type: 'value',
      nameTextStyle: {
        color: '#999999',
        padding: [0, 0, -10, 0],
        fontSize: 14
      },
      axisLabel: {
        margin: 20,
        color: '#999999',
        fontWeight: 400,
        fontFamily: 'SourceHanSansCN-Regular, SourceHanSansCN',
        fontSize: 16
      },
      axisTick: {
        lineStyle: {
          color: '#E5E7ED',
          width: 1
        },
        show: true
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#E5E7ED',
          type: 'line'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff',
          width: 1,
          type: 'line'
        },
        show: false
      }
    },
    series: [
      {
        data: valueData,
        type: 'bar',
        barMaxWidth: 'auto',
        barWidth: 35,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#4AA0F6'
              },
              {
                offset: 1,
                color: '#3751FE'
              }
            ]
          }
        }

      }

    ]
  };
  commandstatsIntance.setOption(
    option
  );

  window.addEventListener('resize', () => {
    commandstatsIntance.resize();
  });
};

/**
 * 初始化2d地图
 * @returns
 */
const initMap = async () => {
  var layer = new TileLayer({
    source: new TileSuperMapRest({
      url: state.outMapUrl,
      wrapX: true
    }),
    projection: 'EPSG:4326'
  });
  let layersList = [layer]
  state.map = new Map({
    target: 'map', // 对应div容器的id
    layers: layersList, // [layer,layer1],
    view: new View({
      // center:[102.88,25.0],//地图中心点
      center: [102.88227778099227, 25.001241376843318], // 地图中心点
      //
      zoom: 18, // 缩放层级
      projection: 'EPSG:4326'// 坐标系
    })
  });

  //  setTimeout(()=>{
  //     state.map.updateSize(); //地图适配div容器
  // },1000);

  state.map.on('click', function (evt) {
    // debugger
    let feature = state.map.forEachFeatureAtPixel(evt.pixel, function(feature, layerVetor) { return feature; });

    // 判断点击处是否有要素
    if (feature) { // 捕捉到要素
      //   alert("wwww")
    }
  })
  addMarker()
// featureClick()
};
/**
 * 添加设备图标
 */
const add2dPoint = () => {
  // let feature,addPointsSource
  if (state.addPointsSource && state.feature) { // 如果地图上feature已存在或者addPointsSource和feature已定义
    state.addPointsSource.clear()// 先移除
    state.addPointsSource.addFeature(state.feature)// 再添加
  } else {
    // 定义一个数据来源，用于添加Feature
    // debugger
    state.addPointsSource = new VectorSource({
      wrapX: false
    });
    // 创建一个矢量图层
    let addPointsLayer = new VectorLayer({
      source: state.addPointsSource
    });

    state.map.addLayer(addPointsLayer);// 添加图层到地图

    let point = [102.88, 25.0]
    // 创建一个点Feature
    state.feature = new Feature(new Point([point[0], point[1]]));

    let featureStyle = new Style({
      image: new Icon(({
        src: logo, // 设置点图标的图片
        scale: 0.5, // 缩放比例
        anchor: [0.5, 1]// 图片中心
      }))
    });
    state.feature.setStyle(featureStyle);// 设置点的样式

    state.addPointsSource.addFeature(state.feature);// 将Feature加到source内
  }
}
/** 聚合点位* */
const addMarker = ()=> {
  let source = new VectorSource();
  // 随机创建200个要素，后台点位取出后按此格式处理
  for (let i = 1; i <= 200; i++) {
    let coordinates = [102.88, 25.0] // [[102.88 + Math.random() * 0.05,25.0 + Math.random() * 0.05]];
    let feature = new Feature(new Point(coordinates));
    source.addFeature(feature);
  }
  console.log(source)

  // 聚合
  let clusterSource = new Cluster({
    source: source,
    distance: 50
  })

  let clusters = new VectorLayer({
    source: clusterSource,
    style: function (feature, resolution) {
      let size = feature.get('features').length;
      let style = new Style({
        image: new StyleCircle({
          radius: 20,
          stroke: new Stroke({
            color: 'white'
          }),
          fill: new Fill({
            color: '#AAD3DF'
          })
        }),
        text: new Text({
          text: size.toString(),
          fill: new Fill({
            color: 'black'
          })
        })
      })
      return style;
    }
  });

  console.log(clusters)
  state.map.addLayer(clusters)
  featureClick()
}

// 给页面的要素添加点击事件
const featureClick = ()=> {
  var selectSingleClick = new Select({
    style: new Style({
      image: new Circle({
        radius: 18,
        fill: new Fill({
          color: 'rgba(70,220,198,0.5)'
        })
      })
    })
  });
  state.map.addInteraction(selectSingleClick);
  selectSingleClick.on('select', e =>{
    var featuresAry = e.target.getFeatures().getArray();
    if (featuresAry.length > 0) {
      let featureList = featuresAry[0];

      let coordinate = featureList.getGeometry().getExtent() // 点击的点经纬度
      console.log(coordinate)
      // 至此得出聚合图层的要素列表
      let features = featureList.getProperties().features;

      if (features.length == 1) {
        let featureData = features[0].get('data') || {}
        // alert(featureData,coordinate)
        // this.showFeature(featureData, coordinate)
      } else if (features.length > 1) {
        //   alert("点中了22")
        //  alert(features,coordinate)
        // this.showFeatureList(features, coordinate)   // 展示设备列表
      }
    }
  })
}
/**
   * 删除设备图标
   */
const del2dPoint = ()=>{
  state.addPointsSource.removeFeature(state.feature)// 从source里移除当前点feature
  state.feature = null
}
const initmap3d = ()=>{
  window.viewer = new Cesium.Viewer('my-map', {
    geocoder: false, // 是否显示地名查找工具
    homeButton: false, // 是否显示首页位置工具
    sceneModePicker: false, // 是否显示视角模式切换工具
    baseLayerPicker: false, // 是否显示默认图层选择工具
    navigationHelpButton: false, // 是否显示导航帮助工具
    animation: false, // 是否显示动画工具
    timeline: true, // 是否显示时间轴工具
    fullscreenButton: false // 是否显示全屏按钮工具
  }
  )
  //       var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
  //         handler.setInputAction(function (event) {
  //           //  console.log('左键按下：', event.position);//左键按下时响应
  //         }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
  //         handler.setInputAction(function (event) {
  //          //   console.log('左键弹起：', event.position);//左键弹起时响应
  //         }, Cesium.ScreenSpaceEventType.LEFT_UP);
  //         handler.setInputAction(function (event) {
  //           //console.log(event)
  // //console.log('左键点击：', event.position);//左键按下和弹起记作一次点击，点击后响应
  //         }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  //         handler.setInputAction(function (event) {
  //           //  console.log('左键双击：', event.position);//左键双击后响应
  //         }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

  state.scene = viewer.scene
  state.scene.debugShowFramesPerSecond = true
  // 设置场景总的显存资源占用阈值，默认值：4G,单位GB
  var context = new Cesium.Context(viewer.scene.canvas);
  context.memoryThreshold = 4;
  viewer.contextOptions = context;
  // 设置浏览器内存为最大可用内存的80%，单位MB ，防止内存超限导致崩溃
  var maxAvailableMemory = Cesium.MemoryManager.getMaxMemory()
  Cesium.MemoryManager.setMaxMemory(maxAvailableMemory * 0.8);
  let url = 'https://125.69.0.17:8091/iserver/services/3D-areaJ3d/rest/realspace';
  // let viewer=null;
  // let scene=null
  // viewer = new Cesium.Viewer('my-map');
  //   var utc=Cesium.JulianDate.fromDate(new Date("2023/11/21 8:00:00"));//UTC
  //   viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc,8,new Cesium.JulianDate());//北京时间=UTC+8=GMT+8
  //   scene = viewer.scene
  state.scene.open(url)// 打开场景
  // state.scene.globe.show = false//关闭地球
  // state.scene.skyAtmosphere.show = false//关闭大气层
  //  scene.open('https://125.69.0.17:8091/iserver/services/3D-areaJ3d/rest/realspace')//打开场景

  // ---------添加单个s3m图层------------
  // let layerUrl ="https://125.69.0.17:8091/iserver/services/3D-areaJ3d/rest/realspace/datas/outdoor@outdoor_data/config"
  // let promise =  viewer.scene.addS3MTilesLayerByScp(
  //   layerUrl, //s3m图层配置文件地址
  //   {
  //     name:"outdoor_data"//自定义图层名
  //   }
  // );
  // promise.then((layer)=>{
  //   var bounds = Cesium.BoundingSphere.fromRectangle3D(layer.layerBounds);//获取图层bounds
  //   viewer.scene.camera.flyToBoundingSphere(bounds, {//飞到图层
  //     duration: 0//设置飞行时间0
  //   });
  // })
  // ---------添加单个s3m图层------------
  // }
  // if (typeof Cesium !== 'undefined') { //Cesium加载失败重新加载
  //     window.startupCalled = true;
  //     state.initmap3d(Cesium);
  // }
  // 去除 左下角 版权信息
  // (state.viewer.cesiumWidget.creditContainer as HTMLElement).style.display = "none";

  // 相机位置
  // state.viewer.camera.flyTo({
  //   destination: Cesium.Cartesian3.fromDegrees(120, 48, 25000000),
  // });
  addPoint({
    name: '点',
    longitude: 120,
    latitude: 26,
    altitude: 1056
  })
  // addEntities()
}
const addPoint = (option:any)=> {
  let point = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(
      option.longitude,
      option.latitude,
      option.altitude
    ),
    billboard: {
      // 图像地址，URI或Canvas的属性
      image: state.imgurl,
      // 设置颜色和透明度
      color: Cesium.Color.WHITE.withAlpha(1),
      // 高度（以像素为单位）
      height: 50,
      // 宽度（以像素为单位）
      width: 50,
      // 逆时针旋转
      rotation: 20,
      // 是否显示
      show: true
    }
  });
  point.selected = true;
  viewer.selectedEntityChanged.addEventListener(function(selectedEntity) {
    if (selectedEntity === point) {
      // 选中了实体
      console.log('选中了实体:', point);
    }
  });
  // point.billboard = {
  //   image: 'path/to/image.png',
  //   pixelOffset: new Cesium.Cartesian2(0, -50),
  //   width: 32,
  //   height: 32
  // };

  // point.billboard.setOnClick(function() {
  //   // 点击了实体
  //   console.log('点击了实体:', "wwww");
  // });
  // viewer.entities.add({
  //   position: Cesium.Cartesian3.fromDegrees(110.20, 34.55, 2.61),
  //   billboard: {
  //     // 图像地址，URI或Canvas的属性
  //     image: '/location.png',
  //     // 设置颜色和透明度
  //     color: Cesium.Color.WHITE.withAlpha(0.8),
  //     // 高度（以像素为单位）
  //     height: 50,
  //     // 宽度（以像素为单位）
  //     width: 50,
  //     // 逆时针旋转
  //     rotation: 20,
  //     // 大小是否以米为单位
  //     sizeInMeters: false,
  //     // 相对于坐标的垂直位置
  //     verticalOrigin: Cesium.VerticalOrigin.CENTER,
  //     // 相对于坐标的水平位置
  //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
  //     // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
  //     pixelOffset: new Cesium.Cartesian2(10, 0),
  //     // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
  //     scale: 1.0,
  //     // 显示在距相机的距离处的属性，多少区间内是可以显示的
  //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
  //     // 是否显示
  //     show: true
  //   }
  // });

  // let point = viewer.entities.add({
  // 	name: option.name,
  // 	position: Cesium.Cartesian3.fromDegrees(
  // 		option.longitude,
  // 		option.latitude,
  // 		option.altitude
  // 	),
  //     billboard: {
  //     // 图像地址，URI或Canvas的属性
  //     image: state.imgurl,
  //     // 设置颜色和透明度
  //     color: Cesium.Color.WHITE.withAlpha(1),
  //     // 高度（以像素为单位）
  //     height: 500,
  //     // 宽度（以像素为单位）
  //     width: 500,
  //     // 逆时针旋转
  //     rotation: 20,
  //     // 大小是否以米为单位
  //     sizeInMeters: false,
  //     // 相对于坐标的垂直位置
  //     verticalOrigin: Cesium.VerticalOrigin.CENTER,
  //     // 相对于坐标的水平位置
  //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
  //     // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
  //     pixelOffset: new Cesium.Cartesian2(10, 0),
  //     // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
  //     scale: 1.0,
  //     // 显示在距相机的距离处的属性，多少区间内是可以显示的
  //     distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
  //     // 是否显示
  //     show: true
  //   }
  // 	// point: {
  // 	// 	// 点的大小（像素）
  // 	// 	pixelSize: 50,
  // 	// 	// 点位颜色，fromCssColorString 可以直接使用CSS颜色
  // 	// 	// color: Cesium.Color.fromCssColorString("red"),
  // 	// 	color: Cesium.Color.BLUE,
  // 	// 	// 边框颜色
  // 	// 	outlineColor: Cesium.Color.fromCssColorString("yellow"),
  // 	// 	// 边框宽度(像素)
  // 	// 	outlineWidth: 1,
  // 	// 	// 是否显示
  // 	// 	show: true,
  // 	// },
  // 	// // 文字
  // 	// label: {
  // 	// 	// 文本。支持显式换行符“ \ n”
  // 	// 	text: option.name,
  // 	// 	// 字体样式，以CSS语法指定字体
  // 	// 	font: "14pt Source Han Sans CN",
  // 	// 	// 字体颜色
  // 	// 	fillColor: Cesium.Color.AQUA,
  // 	// 	// 背景颜色
  // 	// 	backgroundColor: Cesium.Color.AQUA,
  // 	// 	// 是否显示背景颜色
  // 	// 	showBackground: false,
  // 	// 	// 字体边框
  // 	// 	// outline: true,
  // 	// 	// 字体边框颜色
  // 	// 	outlineColor: Cesium.Color.BLACK,
  // 	// 	// 字体边框尺寸
  // 	// 	outlineWidth: 10,
  // 	// 	// 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
  // 	// 	scale: 1,
  // 	// 	// 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
  // 	// 	style: Cesium.LabelStyle.FILL_AND_OUTLINE,
  // 	// 	// 相对于坐标的垂直位置
  // 	// 	verticalOrigin: Cesium.VerticalOrigin.TOP,
  // 	// 	// 相对于坐标的水平位置
  // 	// 	horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
  // 	// 	// 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
  // 	// 	// pixelOffset: new Cesium.Cartesian2(-25, -20),
  // 	// 	// 是否显示
  // 	// 	show: true,
  // 	// }
  // });
  // console.log(point)
  return point
}
/** 描述信息* */
const addEntities = ()=>{
  var wyoming = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.1647, 39.9522),
    name: '我是infobox的标题',
    description: '我是infobox的内容',
    label: {
      text: '我是标签',
      font: '24px Helvetica',
      fillColor: Cesium.Color.SKYBLUE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 2,
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      backgroundColor: Cesium.Color.PINK,
      showBackground: true
    }
  })
  wyoming.description = '\
<img\
width="50%"\
style="float:left; margin: 0 1em 1em 0;"\
src="//cesiumjs.org/images/2015/02-02/Flag_of_Wyoming.svg"/>\
<p>\
Wyoming is a state in the mountain region of the Western \
United States.\
</p>\
<p>\
Wyoming is the 10th most extensive, but the least populous \
and the second least densely populated of the 50 United \
States. The western two thirds of the state is covered mostly \
with the mountain ranges and rangelands in the foothills of \
the eastern Rocky Mountains, while the eastern third of the \
state is high elevation prairie known as the High Plains. \
Cheyenne is the capital and the most populous city in Wyoming, \
with a population estimate of 62,448 in 2013.\
</p>\
<p>\
Source: \
<a style="color: WHITE"\
  target="_blank"\
  href="http://en.wikipedia.org/wiki/Wyoming">Wikpedia</a>\
</p>'
}
/** 重置操作表单 */
const reset = () => {
  form.value = { ...initFormData };
  workOrderRef.value?.resetFields();
  releaseWarnRef.value?.resetFields();
};
  /** 点击派发工单按钮操作 */
const sellWordOrders = async (type, item) => {
  reset();
  state.id = item.alarmRecordId// '1844662944782548994'//item?item.alarmCode||'0123456';
  // const { data } = await api.getUser();
  if (type == 'pfgd') {
    dialog.shouAdd = true;
    dialog.title = '派发工单';
    dialog.width = '600px'
  } else if (type == 'jcjg') {
    dialog.shouAdd = true;
    dialog.title = '解除警告';
    dialog.width = '600px'
  } else if (type == 'gjxq') {
    dialog.shouAdd = true;
    dialog.title = '告警详情';
    dialog.width = '1200px'
    getAlarmRecordDetail(state.id)
  } else if (type == 'bfdw') {
    dialog.shouAdd = true;
    dialog.title = '布防点位';
    dialog.width = '1200px'
    getPointDetail(state.id)
  } else if (type == 'warnModal') {
    dialogVisible.value = true
  }

  // await initTreeData();
  // postOptions.value = data.posts;
  // roleOptions.value = data.roles;
  // form.value.password = initPassword.value.toString();
};

const handleClose = () => {
  reset();
  dialogVisible.value = false;
}
/** 取消按钮 */
const cancel = () => {
  reset();
  dialog.shouAdd = false;
}
/**
 * 关闭用户弹窗
 */
const closeDialog = () => {
  dialog.shouAdd = false;
  resetForm();
};
/**
 * 重置表单
 */
const resetForm = () => {
  // userFormRef.value?.resetFields();
  // userFormRef.value?.clearValidate();

  form.value.id = undefined;
  form.value.status = '1';
};
/** 提交按钮 */
const submitForm = () => {
  if (dialog.title == '派发工单') {
    workOrderRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        form.value.userId ? await api.updateUser(form.value) : await api.addUser(form.value);
        proxy?.$modal.msgSuccess('操作成功');
        dialog.shouAdd = false;
      // await getList();
      }
    });
  } else if (dialog.title == '解除警告') {
    releaseWarnRef.value?.validate(async (valid: boolean) => {
      if (valid) {
        await api.updatealarmrecord(releaseWarnForm.value)
        proxy?.$modal.msgSuccess('操作成功');
        dialog.shouAdd = false;
        await getRightData();
      }
    });
  }
};
/** 查询用户列表 */
const getList = async () => {
  loading.value = true;
  const res = await api.listUser(proxy?.addDateRange(queryParams.value, dateRange.value));
  loading.value = false;
  userList.value = res.rows;
  total.value = res.total;
};

const getRightData = async () => {
  const res = await securityPlatDetail();
  rightObj = res.data
  console.log(rightObj, '!!!!')
  alarmRecordVoList.value = res.data.alarmRecordVoList
  console.log(alarmRecordVoList, '!!!!')
  getGjqsList()
};

const getPointDetail = async (id) => {
  const res = await pointDetailById(id);
  pointDetail = res.data
  console.log(pointDetail, '!!!!')
  alarmRecordDetailsVoList.value = res.data.alarmRecordDetailsVoList
  console.log(alarmRecordDetailsVoList, '!!!!')
  loading.value = false
};
const getAlarmRecordDetail = async (id) => {
  const res = await alarmRecordDetail(id);
  alarmRecordDetailList = res.data
  console.log(alarmRecordDetailList, '!!ww!!')
  // alarmRecordDetailsVoList.value=res.data.alarmRecordDetailsVoList
  // console.log(alarmRecordDetailsVoList,"!!!!")
  loading.value = false
};

onMounted(() => {
  nextTick(() => {
    // initMap();
    getTreeSelect()
    getRightData()

    // getGjqsList();

    // initmap3d()
  });
});
</script>

<style scoped lang="scss">
.home{
  width: 100%;
  height: 100%;
}
#map {
  width: 100%;
  height: 100%;

}
#my-map{
  width: 50%;
  height: 100%;
  position: absolute;
  left: 50%;
}
.left-tree{
  width: 212px;
  height: 100%;
  background: #FFFFFF;
  border-radius: 0px 0px 0px;
  position: absolute;
  left: 0;
  top: 0;
}
.bt{
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  margin-bottom: 10px;
  display: inline-block;
}
.block{
  width: 5px;
  height: 17px;
  background: #0058F6;
  border-radius: 66px 66px 66px 66px;
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}
.right_klsb{
  // width: 322px;
  height: 102px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #DCDFE6;
}
.right_xfsb{
  // width: 322px;
  height: 82px;
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #DCDFE6;
  margin-top: 10px;
}
.right_gjqs{
  // width: 322px;
height: 254px;
background: #FFFFFF;
border-radius: 0px 0px 0px 0px;
border: 1px solid #DCDFE6;
margin-top: 10px;
}
.right_dqjg{
  // width: 322px;
  height: calc(100% - 488px);
  background: #FFFFFF;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid #DCDFE6;
  margin-top: 10px;
}
.blue-bg{
  width: 28px;
  height: 28px;
  background: #0058F6;
  border-radius: 108px 108px 108px 108px;
  display: inline-block;
  text-align: center;
  padding-top: 5px;
  margin-right: 5px;
}
.green-bg{
  width: 16px;
  height: 16px;
  background: #00B42A;
  border-radius: 6px 6px 6px 6px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}
.red-bg{
  width: 16px;
  height: 16px;
  background: #F53F3F;
  border-radius: 6px 6px 6px 6px;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}
.yellow-bg{
  width: 32px;
  height: 32px;
  background: #FF8800;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}
.state-style{
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  color: #FF7D00;
}
.type-style{
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 12px;
  color: #999999;
}
.num-style{
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: bold;
  font-size: 20px;
  color: #333333;
}
.div_50{
  width: 100%;
  height: 50%;
  justify-content: center;
  display: flex;
  align-items: center;
}
.title{
  height: 40px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 14px;
  color: #333333;
  padding: 10px;
}
.circleIcon{
  width: 10px;
  height: 10px;
  background: #0058F6;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}
.dqjg_list{
  height:calc(100vh - 580px);
  overflow: auto;
}
.dqjg_list-item{
  width: 340px;
  height: 165px;
  background: #F1F7FF;
  border-radius: 4px 4px 4px 4px;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  margin-top: 10px;
  margin-left: 10px;
  padding-top: 10px;
  position: relative;
}
.dqjg_list-item>span{
  display: inline-block;
  width: 100%;
  padding: 5px 10px;
}

.btn-list{
  width: 100%;
  height:40px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.ckxq_btn{
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #0058F6;
  cursor: pointer;
}
.jcjg_btn{
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #FF7D00;
  cursor: pointer;
}
.jg_modal{
  width:800px;
  height:200px;
  position: absolute;
  left: 50%;
  top: 20%;
  background: #fff077d4;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  padding: 10px;
  margin-left: -400px;
}
.gjtp{
  float: left;
  width: 450px;
  height: 250px;

}
.gjtp .el-image{
  margin-top: 10px;
}

.blue-line{
  width: 5px;
  height: 10px;
  display: inline-block;
  margin-right: 5px;
  background-color: blue;
  margin-bottom: 10px;
  vertical-align: -webkit-baseline-middle;
}
.jgti_modal .el-overlay .el-overlay-dialog .el-dialog .el-dialog__header{
  padding: 0;
}
.map_content{
  width: 206px;
  height: 136px;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
  border-radius: 10px 10px 10px 10px;
  position: absolute;
  right:20px;
  top:30px;
}
.color14{
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
}
</style>
